/** @format */

import {
  Button,
  Col,
  Flex,
  FloatButton,
  List,
  Menu,
  MenuProps,
  Row,
} from "antd";
import { memo, useEffect, useState } from "react";
import {
  getHomePagePopularColumn,
  getHomePagePopularQA,
  getHomePagePopularRoute,
} from "../../network/api";
import styles from "./index.module.less";

type MenuItem = Required<MenuProps>["items"][number];

const Head = () => {
  return (
    <Flex>
      <Flex style={{ width: "70%" }} vertical>
        <LeftTop />
        <LeftBottom />
      </Flex>
      <Flex style={{ flex: 1, marginLeft: "40px" }}>right</Flex>
      <FloatButton.BackTop />
    </Flex>
  );
};

export default memo(Head);

const LeftTop = memo(() => {
  const [listRoute, setListRoute] = useState([]);
  const [listColumn, setListColumn] = useState([]);
  const [listQA, setListQA] = useState([]);

  // 通过api获取数据
  useEffect(() => {
    getHomePagePopularQA()
      .then((res: any) => {
        setListQA(res);
      })
      .catch((err) => {
        console.log(err);
      });
    getHomePagePopularColumn()
      .then((res: any) => {
        setListColumn(res);
      })
      .catch((err) => {
        console.log(err);
      });
    getHomePagePopularRoute()
      .then((res: any) => {
        setListRoute(res);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  return (
    <Row style={{ width: "100%", height: "230px" }}>
      <Col span={8}>
        <LeftTopItem title={"最新学习路线"} list={listRoute} />
      </Col>
      <Col span={8}>
        <LeftTopItem title={"最受欢迎问答"} list={listQA} />
      </Col>
      <Col span={8}>
        <LeftTopItem title={"最受欢迎专栏"} list={listColumn} />
      </Col>
    </Row>
  );
});

const LeftTopItem = memo((props: any) => {
  const { title, list } = props;

  return (
    <Flex vertical className={styles.leftTopItem}>
      <Flex align="center" justify="space-between" className={styles.header}>
        <div className={styles.title}>{title}</div>
        <Button type="link" className={styles.moreButton}>{`更多>`}</Button>
      </Flex>
      {list.map((item: any, index: number) => {
        return (
          <div className={styles.leftTopItemContent} key={index}>
            {item.name ? item.name : item.title}
          </div>
        );
      })}
    </Flex>
  );
});

const LeftBottom = memo(() => {
  const [selectedKey, setSelectedKey] = useState("g11");

  const onClick: MenuProps["onClick"] = (e) => {
    console.log("click ", e);
    setSelectedKey(e.key);
  };

  return (
    <Flex style={{ marginTop: "40px" }}>
      <Menu
        style={{
          width: "140px", // 菜单宽度设置为 140px
          backgroundColor: "white", // 背景颜色为白色
        }}
        onClick={onClick} // 点击菜单项时触发的事件
        defaultSelectedKeys={["g11"]} // 默认选中的菜单项（key 为 "g11"）
        mode="inline" // 菜单的显示模式为 "inline" 垂直
        items={[
          ...(LeftBottomMenuList.map((item: any) => {
            return {
              key: item.key,
              label: (
                <div style={{ color: "rgb(39, 102, 146)", fontSize: "16px" }}>
                  {item.label}
                </div>
              ),
              type: "group",
              children: item.children.map((child: any) => {
                return {
                  key: child.key,
                  label: child.label,
                  className:
                    selectedKey === child.key
                      ? "LeftBottomMenuItemSelected"
                      : "LeftBottomMenuItem",
                };
              }),
            };
          }) as any[]),
          { key: "g26", label: "去添加>>" },
        ]}
      />
      <List
        style={{ flex: 1, backgroundColor: "white", marginLeft: "40px" }}
      ></List>
    </Flex>
  );
});

const LeftBottomMenuList = [
  {
    key: "g1",
    label: "推荐",
    children: [
      { key: "g11", label: "热门博文" },
      { key: "g12", label: "每日一问" },
    ],
  },
  {
    key: "g2",
    label: "专题",
    children: [
      { key: "g21", label: "面试相关" },
      { key: "g22", label: "性能优化" },
      { key: "g23", label: "framework" },
      { key: "g24", label: "开源库源码" },
      { key: "g25", label: "大厂分享" },
    ],
  },
];
